<template>
	<view class="content">
		<view class="panel-header solids-bottom padding-bottom-xs">
			<text class="panel-title text-xl text-bold">基本信息</text>
			<text class="panel-edit text-df text-blue"><a @click="editBasicData()">{{profileEdit ? '[保存]' : '[编辑]'}}</a></text>
		</view>
		<view class="panel-content">
			<view class="panel-item flex text-lg padding-sm text-left border-bottom">
				<view class="basis-xs">姓名:</view>
				<view :class="profileEdit ? 'bg-gray basis-xl' : 'basis-xl'">
					<view v-if="!profileEdit">{{student.name}}</view>
					<view v-if="profileEdit"><input v-model="student.name" /></view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left border-bottom">
				<view class="basis-df flex">
					<view class="basis-sm">年龄:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.age}}</view>
						<view v-if="profileEdit"><input v-model="student.age" /></view>
					</view>
				</view>
				<view class="basis-df flex">
					<view class="basis-sm">民族:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.nation}}</view>
						<view v-if="profileEdit"><input v-model="student.nation" /></view>
					</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left border-bottom">
				<view class="basis-df flex">
					<view class="basis-sm">性别:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.gender}}</view>
						<view v-if="profileEdit">
							<picker @change="bindGender" :range="pickData" mode="selector" style="width: 100%; min-height: 10px;">
								{{student.gender}}
							</picker>
						</view>
					</view>
				</view>
				<view class="basis-df flex">
					<view class="basis-sm">政治面貌:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.politics}}</view>
						<view v-if="profileEdit"><input v-model="student.politics" /></view>
					</view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left border-bottom">
				<view class="basis-xs">电话:</view>
				<view :class="profileEdit ? 'bg-gray basis-xl' : 'basis-xl'">
					<view v-if="!profileEdit">{{student.tel}}</view>
					<view v-if="profileEdit"><input v-model="student.tel" /></view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left border-bottom">
				<view class="basis-xs">邮箱:</view>
				<view :class="profileEdit ? 'bg-gray basis-xl' : 'basis-xl'">
					<view v-if="!profileEdit">{{student.mail}}</view>
					<view v-if="profileEdit"><input v-model="student.mail" /></view>
				</view>
			</view>
			<view class="panel-item flex text-lg padding-sm text-left border-bottom" v-if="false">
				<view class="basis-df flex">
					<view class="basis-sm">学位:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.degree}}</view>
						<view v-if="profileEdit"><input v-model="student.degree" /></view>
					</view>
				</view>
				<view class="basis-df flex">
					<view class="basis-sm">学历:</view>
					<view :class="profileEdit ? 'bg-gray basis-lg' : 'basis-lg'">
						<view v-if="!profileEdit">{{student.record}}</view>
						<view v-if="profileEdit"><input v-model="student.record" /></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				student: {
					name: '',
					age: 0,
					nation: '',
					gender: '',
					politics: '',
					tel: '',
					mail: '',
					degree: '',
					record: ''
				},
				profileEdit: false,
				pickData: ['男', '女']
			}
		},
		created() {
			uni.showLoading();
			uni.post("/api/resume/GetResume",{},msg => {
				uni.hideLoading();
				if (msg.success) {
					// this.resumeData = msg;
					this.student = {
						name: msg.basic.RealName,
						age: msg.basic.Age,
						nation: msg.basic.Ethnicity,
						politics: msg.basic.Politic,
						tel: msg.basic.Mobile,
						mail: msg.basic.Email,
						gender: msg.basic.Gender
					};
				} else {
					uni.showToast({
						title: msg.msg,
						icon: 'none'
					});
				}
			});
		},
		methods: {
			editBasicData() {
				if (this.profileEdit) {
					this.profileEdit = false;
					var submitData = {
						RealName: this.student.name,
						Age: this.student.age,
						Ethnicity: this.student.nation,
						Politic: this.student.politics,
						Mobile: this.student.tel,
						Email: this.student.mail,
						Gender: this.student.gender
					};
					uni.showLoading();
					uni.post("/api/resume/SaveBasic",{...submitData},msg => {
						uni.hideLoading();
						if (!msg.success) {
							uni.showToast({
								icon: 'none',
								title: msg.msg
							});
						} else {
							uni.showToast({
								title: '修改成功'
							});
						}
					});
				} else {
					this.profileEdit = true;
				}
			},
			bindGender(e) {
				this.student.gender = this.pickData[e.target.value];
			}
		}
	}
</script>

<style>
	.panel {
		/* width: 100%; */
		margin: 10px;
		padding: 10px;
		height: auto;
	}
	
	.panel-header {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
	
	.word-warp {
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}
	
	.border-bottom {
		border-bottom: #eeeeee solid 1px;
	}
</style>
